<!-- 使用虚拟滚动的树表<tbody>标签并未加载(实际加载的是<cdk-virtual-scroll-viewport>内部的<tbody>)，cdkDropList挂载在上面不会生效，需要挂载到lv-treetable上 -->
<lv-treetable
  [lvData]="data"
  #lvTreeTable
  lvVirtualScroll
  [lvScroll]="{ y: '400px' }"
  lvVirtualMinBuffer="96px"
  [lvVirtualTrackBy]="trackByIndex"
  (lvStateChange)="stateChange($event)"
  cdkDropList
  (cdkDropListDropped)="drop($event)"
>
  <thead>
  <tr>
    <th lvCellKey="name">Name</th>
    <th lvCellKey="age">Age</th>
    <th lvCellKey="random">Random</th>
  </tr>
  </thead>
  <tbody>
  <ng-template lv-virtual-scroll let-item>
    <ng-container *ngTemplateOutlet="contentTpl; context: { $implicit: item }"></ng-container>
  </ng-template>
  <ng-template #contentTpl let-item>
    <tr *ngIf="item.data._lv_level !== 1">
      <ng-container *ngTemplateOutlet="trContainerTpl; context: { $implicit: item.data}"></ng-container>
    </tr>

    <!-- 可以在数据中添加唯一标识，比如isLeaf来判断当前行是否可被拖拽，适用于展开互斥的场景 -->
    <tr *ngIf="item.data._lv_level === 1" cdkDrag [cdkDragData]="item">
      <!-- 拖动时占位符 -->
      <td colspan="3" class="app-custom-placeholder" *cdkDragPlaceholder></td>
      <!-- 拖动预览图 -->
      <td colspan="3" *cdkDragPreview></td>
      <!-- 实际渲染视图 -->
      <ng-container *ngTemplateOutlet="trContainerTpl; context: { $implicit: item.data }"></ng-container>
    </tr>

  </ng-template>
  <ng-template #trContainerTpl let-item>
    <td
      [lvShowExpanded]="item.children?.length"
      [(lvExpanded)]="item.expanded"
      [lvPaddingLeft]="item._lv_level * 24 + 'px'"
      (lvExpandedChange)="expandedChange($event,item)"
    >
      {{ item.data.name }}
    </td>
    <td>{{ item.data.age }}</td>
    <td>{{ item.data.random }}</td>
  </ng-template>
  </tbody>
</lv-treetable>
